<template>
  <div style="margin-top: 10px">
    <el-tag class="org-item" :type="org.type === 'dept'?'':'info'"
            v-for="(org, index) in _value" :key="index + '_org'"
            closable size="mini" @close="removeOrgItem(index)">
      {{ org.name }}
    </el-tag>
  </div>
</template>

<script setup>

import {defineProps,ref, defineEmits,reactive, toRefs, nextTick, onMounted,computed,getCurrentInstance,onBeforeUnmount} from 'vue';

import { useStore } from 'vuex'
const store = useStore()
import {useRouter} from 'vue-router'
const router = useRouter()

const { proxy } = getCurrentInstance()

const emit = defineEmits(['insertNode'])

const showError = ref(false);
const errorInfo = ref('');


const props = defineProps({
  value: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const _value = computed({
  get:()=>{
    return props.value;
  },
  set:()=>{
    emit("input", val);
  }
})


function removeOrgItem(index) {
  _value.splice(index, 1)
}
</script>

<style scoped>
.org-item{
  margin: 5px;
}
</style>
